import React from 'react';
import { StyleSheet, View, Text, StatusBarStyle } from 'react-native';
import {
  SafeAreaView, Edge, SafeAreaProvider, useSafeAreaInsets,
  useSafeAreaFrame, EdgeInsets, Rect, initialWindowMetrics
} from 'react-native-safe-area-context'

function App({ }): JSX.Element {

  const STYLES = ['default', 'dark-content', 'light-content'] as const;

  const [backColor, setBackColor] = React.useState("red");
  const [mode, setMode] = React.useState('margin');
  const [top, setTop] = React.useState(true);
  const [bottom, setBottom] = React.useState(true);
  const [layout, setLayout] = React.useState('null');
  const [insets, setInsets] = React.useState<EdgeInsets>();
  const [frame, setFrame] = React.useState<Rect>();
  const [statusBarStyle, setStatusBarStyle] = React.useState<StatusBarStyle>(
    STYLES[0],
  );
  const [hidden, setHidden] = React.useState(false);
  const [translucent, setTranslucent] = React.useState(true);

  let edges: Edge[] = [];


  const setEdges = () => {
    let arr = []
    if (top) {
      arr.push('top');
    }
    if (bottom) {
      arr.push('bottom');
    }
    edges = arr
  }



  setEdges();
  // initialWindowMetrics.frame;
  // initialWindowMetrics.insets;


  const PrintInsetsTestView = () => {
    setInsets(useSafeAreaInsets());
    setFrame(useSafeAreaFrame());
    return null;
  };


  return (
    <SafeAreaProvider initialMetrics={initialWindowMetrics}>
      <SafeAreaView style={{
        flex: 1,
        backgroundColor: backColor,
      }}
        mode={mode}
        edges={edges}
        onLayout={(e) => {
          setLayout(JSON.stringify(e.nativeEvent.layout))
        }}>

        <View>
          <Text style={{ height: 36, marginBottom: 40 }}>{JSON.stringify(initialWindowMetrics)}</Text>
          <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 20 }}>
            <View style={styles.button}
              onTouchEnd={() =>
                setMode(mode == 'margin' ? 'padding' : 'margin')
              }>
              <Text style={styles.buttonText}>mode:{mode}</Text>
            </View>
          </View>
          <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 20, }}>

            <View style={[styles.button80, { backgroundColor: top ? 'orange' : 'white' }]}
              onTouchEnd={() => {
                setTop(!top)
                setEdges()
              }
              }>
              <Text style={styles.buttonText}>top</Text>
            </View>

            <View style={[styles.button80, { marginLeft: 10, backgroundColor: bottom ? 'orange' : 'white' }]}
              onTouchEnd={() => {
                setBottom(!bottom)
                setEdges()
              }
              }>
              <Text style={styles.buttonText}>bottom</Text>
            </View>
          </View>
        </View>
      </SafeAreaView>
    </SafeAreaProvider>
  )
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    height: '100%',
  },
  svgContainer: {
    width: '100%',
    height: 150,
  },
  label: {
    color: 'gray',
    width: '100%', // hack
    height: 20, // hack
  },
  button: {
    width: 160,
    height: 36,
    backgroundColor: 'hsl(190, 50%, 70%)',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  button80: {
    width: 80,
    height: 36,
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 8,
  },
  buttonText: {
    width: '100%',
    height: '100%',
    fontWeight: 'bold',
  },
  pagerView: {
    flex: 1,
    backgroundColor: 'hsl(190, 50%, 70%)',
    paddingTop: 24,
    margin: 24
  },
  margin20: {
    marginLeft: 20
  }
});



export default App;